<template>
  <div>
    <div class="input-number-range" :class="{ 'is-disabled': disabled }">
      <div class="flex">
        <div class="from">
          <el-input
              ref="input_from"
              v-model="userInputFrom"
              :disabled="disabled"
              placeholder="最小值"
              @blur="handleBlurFrom"
              @focus="handleFocusFrom"
              @input="handleInputFrom"
              @change="handleInputChangeFrom"
          ></el-input>
        </div>
        <div class="center">
          <span>至</span>
        </div>
        <div class="to">
          <el-input
              ref="input_to"
              v-model="userInputTo"
              :disabled="disabled"
              placeholder="最大值"
              @blur="handleBlurTo"
              @focus="handleFocusTo"
              @input="handleInputTo"
              @change="handleInputChangeTo"
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  /**当前双向数据绑定的值 */
  modelValue: {
    required: true
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  //参数精度
  precision: {
    type: Number,
    default: () => {
      return 0;
    },
    validator(val) {
      return val >= 0 && val === parseInt(val, 10)
    }
  },
})
const userInputFrom = ref(null);
const userInputTo = ref(null);

watch(() => props.modelValue, (value) => { //直接监听
  if (value instanceof Array && props.precision !== undefined) {
    userInputFrom.value = typeof value[0] === 'number' ? value[0] : null
    userInputTo.value = typeof value[1] === 'number' ? value[1] : null
  }
}, {deep: true, immediate: true});

function toPrecision(num, precision) {
  if (precision === undefined) precision = 0
  return parseFloat(
      Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
  )
}

const emits = defineEmits();

function handleBlurFrom(event) {
  emits('blurfrom', event);
};


function handleFocusFrom(event) {
  emits('focusfrom', event);
};

function handleInputFrom(value) {
  emits('inputfrom', value);
};

function handleBlurTo(event) {
  emits('blurto', event)
}

function handleFocusTo(event) {
  emits('focusto', event)
}

function handleInputTo(value) {
  emits('inputto', value)
  // userInputTo.value = value
}

// from输入框change事件
function handleInputChangeFrom(value) {
  // 如果是非数字空返回null
  if (isNaN(value) || value === '') {
    emits('update:modelValue', [null, userInputTo.value])
    emits('changeFrom', userInputFrom.value)
    return
  }

  // 初始化数字精度
  userInputFrom.value = setPrecisionValue(value)

  // 如果from > to 将from值替换成to
  if (typeof userInputTo.value === 'number') {
    userInputFrom.value =
        parseFloat(userInputFrom.value) <= parseFloat(userInputTo.value)
            ? userInputFrom.value : userInputTo.value
  }
  emits('update:modelValue', [userInputFrom.value, userInputTo.value])
  emits('changeFrom', userInputFrom.value);
}

// to输入框change事件
function handleInputChangeTo(value) {
  // 如果是非数字空返回null
  if (isNaN(value) || value === '') {
    emits('update:modelValue', [userInputFrom.value, null])
    emits('changeFrom', userInputTo.value)
    return
  }

  // 初始化数字精度
  userInputTo.value = setPrecisionValue(value)

  if (typeof userInputFrom.value === 'number') {
    userInputTo.value =
        parseFloat(userInputTo.value) >= parseFloat(userInputFrom.value)
            ? userInputTo.value : userInputFrom.value
  }
  emits('update:modelValue', [userInputFrom.value, userInputTo.value])
  emits('changeTo', userInputTo.value)
}

// 设置成精度数字
function setPrecisionValue(value) {
  if (props.precision !== undefined) {
    const val = toPrecision(value, props.precision)
    return val
  }
  return null
}
</script>

<style lang="scss" scoped>
// 取消element原有的input框样式
:deep(.el-input__inner) {
  border: 0;
  margin: 0;
  padding: 0 15px !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.input-number-range {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;

  .center {
    margin-top: 1px;
    margin-right: 2px;
    margin-left: 2px;
  }
}

.is-disabled {
  background-color: #eef0f6;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>